const React = require('react');
const ReactDOM = require('react-dom');
const Component = React.Component;
const Tile = require("./Tile");
const Dropdown = require("Dropdown");
const Button = require("Button");
const FontIcon = require("FontIcon");
const Menu = require('Menu');
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.MenuItemGroup;

class Page extends Component{
    componentDidMount (){
        for(let i in this.refs){
            let ref = this.refs[i];
            let block = ReactDOM.findDOMNode(ref);
            SyntaxHighlighter.highlight({}, block);
        }
    }
    render() {

        let menu = <Menu>
            <Menu.Item>item1</Menu.Item>
            <Menu.Item>item2</Menu.Item>
            <Menu.Item>item3</Menu.Item>
            <Menu.Item disabled={true}>item4(disabled)</Menu.Item>
        </Menu>

        return (
            <div className="container">
                <div>
                    <Dropdown action="click" overlay={<Menu><Menu.Item>menu item 1st</Menu.Item><Menu.Divider></Menu.Divider><Menu.Item>menu item 2nd</Menu.Item></Menu>}>
                        <span>click me <FontIcon icon="arrow-down"/></span>
                    </Dropdown>
                </div>

                <br/>
                <div>
                    <Dropdown action="click" overlay={menu}>
                        <span>欢迎您，admin <FontIcon icon="arrow-down"/></span>
                    </Dropdown>
                </div>


                <br/>
                <div>
                    <Dropdown action="click" overlay={menu}>
                    <Button>选择xxxx<FontIcon icon="arrow-down"/></Button>
                    </Dropdown>
                </div>
            </div>
        )
    }
}

module.exports = Page;